﻿@model Run
@{
    var mo = Model ?? new Run();
}

@if (Model != null)
{
    ViewData["Title"] = "Editing " + mo.RunRemark;
}
else
{
    ViewData["Title"] = "Run";
    mo.RunContent1 = string.Join("\n", new List<string> {
        "<!DOCTYPE html>",
        "<html>",
        "",
        "<head>",
        "    <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" />",
        "    <meta charset=\"utf-8\" />",
        "    <title>Run</title>",
        "</head>",
        "",
        "<body>",
        "",
        "</body>",
        "",
        "</html>"
    });
}
<input type="hidden" class="nr-hid-code" value="@mo.RunCode" />

<div class="container-fluid">
    <div class="row mt-2">
        <div class="col-auto mb-2">
            <sl-button size="small" variant="success" outline class="nr-btn-run">Run</sl-button>

            @{
                var hc = ViewContext.HttpContext;
                bool IsLogin = hc.User.Identity.IsAuthenticated;
                bool IsMe = IsLogin && IdentityService.Get(hc)?.UserId == mo.Uid;
            }

            <sl-button size="small" variant="primary" outline class='nr-btn-save @(IsLogin?"":"d-none")'>Save</sl-button>
            <sl-button size="small" variant="danger" outline class='nr-btn-delete @(IsMe?"":"d-none")'>Delete</sl-button>
            <sl-button size="small" variant="primary" outline href="/run/code/@mo.RunCode" class='@(IsMe?"":"d-none")'>View</sl-button>
        </div>
        <div class="col-auto d-none d-sm-inline-block mb-2">
            <sl-input class="nr-txt-description" placeholder="Description" size="small" value="@mo.RunRemark" maxlength="200"></sl-input>
        </div>
        <div class="col-auto d-none d-sm-inline-block mb-2">
            <sl-dropdown class="nr-dd-library">
                <sl-button slot="trigger" caret size="small" class="nr-btn-library">Library</sl-button>
                <sl-input class="nr-txt-search-library" placeholder="Search NPM" size="small"></sl-input>
                <sl-menu class="nr-se-library">
                    <sl-menu-item disabled>jquery</sl-menu-item>
                    <sl-menu-item disabled>jquery@3.6.0</sl-menu-item>
                </sl-menu>
            </sl-dropdown>
        </div>
    </div>
</div>

<sl-split-panel vertical style="--divider-width: 4px; border-top: 1px solid var(--sl-color-neutral-200)" position="60" class="nr-card0 nr-pre-init invisible overflow-hidden">
    <sl-icon slot="handle" name="grip-horizontal"></sl-icon>
    <div slot="start">
        <sl-split-panel position="60" style="--divider-width: 4px;" class="nr-card1">
            <sl-icon slot="handle" name="grip-vertical"></sl-icon>
            <div slot="start">
                <sl-split-panel position="60" style="--divider-width: 4px;" class="nr-card2">
                    <sl-icon slot="handle" name="grip-vertical"></sl-icon>
                    <div slot="start">
                        <pre class="nr-pre-html overflow-hidden position-relative" data-lang="html">@(string.IsNullOrWhiteSpace(mo.RunContent1) ? "" : mo.RunContent1)</pre>
                    </div>
                    <div slot="end">
                        <pre class="nr-pre-css overflow-hidden position-relative" data-lang="css">@(string.IsNullOrWhiteSpace(mo.RunContent3) ? "" : mo.RunContent3)</pre>
                    </div>
                </sl-split-panel>
            </div>
            <div slot="end">
                <pre class="nr-pre-js overflow-hidden position-relative" data-lang="javascript">@(string.IsNullOrWhiteSpace(mo.RunContent2) ? "" : mo.RunContent2)</pre>
            </div>
        </sl-split-panel>
    </div>
    <div slot="end">
        <div class="nr-preview overflow-hidden position-relative"></div>
    </div>
</sl-split-panel>

@Html.Raw(Netnr.QuoteTo.Html("js-beautify,monaco-editor"))
<script src="/js/run/edit.js" asp-append-version="true"></script>